<template>
  <div class="global-area">
    <van-picker
    v-show="showAreaList"
    :title="showTitle?$t('login.area'):''"
    show-toolbar
    :loading="loading"
    :columns="columns"
    @cancel="onCancel"
    @confirm="onConfirm"
    @change="onChange"
    item-height="0.8rem"
    :cancel-button-text="$t('word.btn')"
    :confirm-button-text="$t('word.ok')"
    />
    <glCountry @callback="countrySelect" v-if="showCountryList"> </glCountry>

  </div>
</template>
<script>
export default {
  props: {
    showCancle: {
      type: Boolean,
      default: true
    },
    showTitle: {
      type: Boolean,
      default: true
    },
  },
  data() {
    return {
        loading: false,
        columns: [{},{},{}],


        showCountryList: true,   //国家列表
        showAreaList: false,   //国家列表
        pid: '0',  //默认国家编码
    };
  },
  watch: {
    columns: {
        handler: function(val, oldVal) {
        }
    }
  },
  mounted() {
  },
  methods: {
    countrySelect ( data ){
        if(!data){
            this.$emit("callback", null);
            return;
        }
        this.columns = [];
        this.showCountryList = false;
        this.showAreaList = true;
        this.pid = data.pid;
        this.reqArealist(0, this.pid);


    },

    onCancel() {
        this.showCountryList = true;
        this.showAreaList = false;
    },
    onConfirm(value, index) {
        let areaid = -1;
        let areaName = "";
        if(index[2] > 0){
            areaid = value[2].value;
            areaName = value[0].text + value[1].text + value[2].text;
        } else if (index[1] > 0){
            areaid = value[1].value;
            areaName = value[0].text + value[1].text;
        } else if (index[0] > 0){
            areaid = value[0].value;
            areaName = value[0].text;
        }
        if(-1 ==  areaid){
            //this.$toast("请至少选择一个地区");
            this.$toast(this.$t("word.choose_area_error"));
        } else {
            let data = {
                areaid: areaid,
                areaName: areaName
            };
            this.$emit("callback", data);
        }

    },
    onChange( picker, value, index ) {
        let nextIndex = index + 1;
        if (nextIndex > 0 && nextIndex < 3){
           this.reqArealist(nextIndex, value[index].value);
        }
    },
    reqArealist(index, parentid) {

        if(-1 == parentid){
            this.$set(this.columns, index, {});
            if(1 == index){
                this.$set(this.columns, index+1, {});
            }
            return;
        }
        this.loading = true;
        this.$post(this.URL.common.area, {
        pid: parentid,
        }).then(res => {
            this.loading = false;
            if (res.code != 0) {
                this.$toast(res.message);
                return;
            }
            let areaArr = res.data;
            if(0 == parentid && areaArr.length < 1){
                return;
            }
            if (0 == index) {
                this.$set(this.columns, 1, {});
                this.$set(this.columns, 2, {});
            } else if (1 == index) {
                this.$set(this.columns, 2, {});
            }

            if (areaArr.length < 1) {
                this.$set(this.columns, index, {});
                return;
            }

            var areas = [{ text: this.$t('word.please_choose'), value: -1 }];
            for (var i = 0; i < areaArr.length; i++) {
                areas.push({ text: areaArr[i].name, value: areaArr[i].id });
            }
            this.$set(this.columns, index, {values:areas});
        });
    }
  }
};
</script>
<style scoped lang="less"></style>
